<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="名称"
                    sortable
                    width="550">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"

                            @click="ok(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="info"
                            @click="ok2(scope.$index, scope.row)">添加下级</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-dialog title="编辑菜单信息" :visible.sync="dialogFormVisible">

            <el-form :model="form">
                <el-form-item label="社区名称:" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok1">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="创建下一级信息" :visible.sync="dialogFormVisible1">

            <el-form :model="form2">
                <el-form-item label="社区名称:" :label-width="formLabelWidth">
                    <el-input v-model="form2.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>


    export default {



        data () {
            return {
                name:'',
                id:'',
                parent_ids:'',
                tableData:[],
                dialogFormVisible:false,
                dialogFormVisible1:false,
                form:{},
                form1:{},
                form2:{},
                formLabelWidth: '170px',
            }
        },

        props : {

        },

        components : {

        },

        computed : {

        },

        methods : {
            async add(){
                console.log(this.form1)
                const res = await this.$http('powerAddUpdata', {
                    name : this.form2.name,
                    code : this.form2.code,
                    type:parseInt(this.form1.type)+1+'',
                    parent_id:this.form1.id,
                    parent_ids:this.form1.parent_ids + this.form1.id + ','
                });
                console.log(res)
                this.init()
                this.dialogFormVisible1 = false
            },
            async del(id,param){
                const res = await this.$http('powerAddUpdata', {
                    id:param.id,
                    del_flag:1
                });
                if(res.errcode==='0'){
                    this.$Notice.error({ title: '失败', desc: res.errmsg })
                }
                this.init()
                console.log('del')
                console.log(res)
            },
            async ok2(id,param){
                this.form1 = param
                this.name = param.name
                this.form1.sort = param.sort
                this.id = param.id
                this.parent_ids = param.parent_ids
                this.dialogFormVisible1 = true

                console.log(param)
            },
            async ok1(){
                const res = await this.$http('powerAddUpdata', {
                    id : this.form.id,
                    name:this.form.name
                });
                if(res.errcode==='0'){
                    this.$Notice.error({ title: '失败', desc: res.errmsg })
                }
                console.log('1111111')
                console.log(res)
                this.init()
                this.dialogFormVisible = false
            },
            async ok(id,param){
                this.form = param
                this.radio = param.is_show
                this.dialogFormVisible=true

                console.log(param)
                console.log(this.form)

            },
            async init () {
                const res = await this.$http('powerList', {
                });
                if(res.errcode==='0'){
                    this.$Notice.error({ title: '失败', desc: res.errmsg })
                }
                const result = this.$util.transData(res, 'id', 'parent_id', 'list');
                this.tableData = result
                // if(res.is_show==='1'){
                //         this.tableData.is_show = '显示'
                // }
                console.log(res);
            },
        },

        watch : {

        },

        mounted () {
            this.init();
        },

    }
</script>

<style scoped>

</style>
